<template>
  <div>
    <template v-if="route.children && route.children.length > 0">
      <el-sub-menu :index="route.path">
        {{ route.meta.title }}
        <MenuItem v-for="route in route.children" :key="route.path" :route="route" />
      </el-sub-menu>
    </template>

    <template v-else>
      <el-menu-item :index="route.path" :route="route.path">
        <RouterLink :to="route.path" custom v-slot="{ navigate }">
          <span @click="navigate">{{ route.meta.title }}</span>
        </RouterLink>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'MenuItem'
}
</script>

<script setup>
defineProps({
  route: {
    type: Object,
    required: true
  }
})
</script>

<style lang="scss" scoped></style>
